<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>360安全卫士首页</title>
	<!-- 引入初始化 css 文件 -->
	<link rel="stylesheet" href="css/base.css">
	<!-- 引入 index css 文件 -->
	<link rel="stylesheet" href="css/index.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/index.js"></script>
</head>

<body>
	<!-- 快捷导航栏 shortcut 开始 -->
	<div class="shortcut">
		<div class="w">
			<div class="logo"></div>
			<div class="shortcut-items">
				<ul>
					<li>
						<a href="#">首页</a>
					</li>
					<li>
						<a href="#">常见问题</a>
					</li>
					<li>
						<a href="#">支持机型</a>
					</li>
					<li>
						<a href="#">官方微博</a>
					</li>
					<li>
						<a href="#">官方论坛</a>
					</li>
					<li>
						<a href="#">
							<img src="images/android.png" alt="">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="images/apple.png" alt="">
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!-- 快捷导航栏 shortcut 结束 -->
	<!-- 头部 header 开始 -->
	<div class="header">
		<div class="big-logo"></div>
		<p>时尚小巧的智能防丢配件 提醒您不忘带重要物品</p>
		<div class="circles">
			<div class="circle1"></div>
			<div class="circle2"></div>
			<div class="circle3"></div>
			<div class="circle4"></div>
			<div class="circle5"></div>
			<div class="shadow1"></div>
			<div class="shadow2"></div>
			<div class="shadow3"></div>
			<div class="shadow4"></div>
			<div class="shadow5"></div>
		</div>
	</div>
	<!-- 头部 header 结束 -->
	<!-- reminder 开始 -->
	<div class="reminder">
		<h5>好记性 不如好提醒</h5>
		<p>
			360防丢卫士仅一元硬币大小，可轻松悬挂或粘贴在您的随身物品上。配合手机客户端使用，当您离开物品较远时，
			<br> 手机便收到报警提示。另外，找不到附近的物品时，可以通过手机让防丢卫士发出声音，从而听声辨位找到它
		</p>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<!-- reminder 结束 -->
	<!-- yellow phone 部分开始	 -->
	<div class="phone">
		<div class="middle">
			<div class="left-description">
				<h5>
					<div class="icon"></div>
					<div class="onekey">一键呼叫</div>
				</h5>
				<p>
					<span>在忙碌而杂乱的办公室，</span>
					<br>
					<span>有时明知道U盘就在桌上某处，可翻来找去就是找不到。</span>
				</p>
				<p>
					<span>通过手机客户端向佩戴在U盘上的防丢卫士发出“呼叫”指令，</span>
					<span>防丢卫士即会发出声音，帮你轻松找到U盘。</span>
				</p>
			</div>
			<div class="phone-icon"></div>
		</div>
	</div>
	<!-- yellow phone 部分结束	 -->
	<!-- red phone的部分开始 -->
	<div class="phone red">
		<div class="middle">
			<div class="left-description red-phone">
				<h5>
					<div class="icon"></div>
					<div class="onekey">智能提醒</div>
				</h5>
				<p>
					<span>上班，赴约，或者仅仅是下楼取快递，</span>
					<br>
					<span>难免因为匆忙出门忘记带钱包，造成付款时的尴尬。</span>
				</p>
				<p>
					<span>出门前，如果钱包不在身上，</span>
					<span>防丢卫士会通过手机发出“报警”，提醒你带钱包。</span>
				</p>
			</div>
			<div class="phone-icon red-icon"></div>
		</div>
	</div>
	<!-- red phone的部分结束 -->
	<!-- blue phone 部分开始 -->
	<div class="phone blue">
		<div class="middle">
			<div class="left-description red-phone blue-phone">
				<h5>
					<div class="icon"></div>
					<div class="onekey">定位记录</div>
				</h5>
				<p>
					<span>回家路上发现钥匙不在身边，</span>
					<br>
					<span>究竟是落在公司，还是忘在家里，或是在路上某处？</span>
				</p>
				<p>
					<span>防丢卫士会记录钥匙最后一次在身边的未知以及时间，</span>
					<span>帮你最短时间找回钥匙。</span>
				</p>
			</div>
			<div class="phone-icon red-icon blue-icon"></div>
		</div>
	</div>
	<!-- blue phone 部分结束 -->
	<!-- features 部分开始 -->
	<div class="features">
		<div class="center">
			<ul>
				<li>
					<div class="left-icon"></div>
					<div class="right-des">
						<h5>一键呼叫</h5>
						<p>
							找不到周围物品时，点击“呼叫”
							<br> 按钮，便可通过声音找到它。
						</p>
					</div>
				</li>
				<li>
					<div class="left-icon"></div>
					<div class="right-des">
						<h5>智能提醒</h5>
						<p>
							当物品和手机距离较远时，手机
							<br> 会收到报警，提醒您不忘带物品
						</p>
					</div>
				</li>
				<li>
					<div class="left-icon"></div>
					<div class="right-des">
						<h5>定位记录</h5>
						<p>防丢卫士会记录物品丢失前的最<br>
							后位置及时间，放便快速寻找
						</p>
					</div>
				</li>
				<li>
					<div class="left-icon"></div>
					<div class="right-des">
						<h5>双向防丢</h5>
						<p>当手机距离较远时，防丢卫士会<br>
							发出声音，提醒您手机部在身边
					</p>
					</div>
				</li>
				<li>
					<div class="left-icon"></div>
					<div class="right-des">
						<h5>超低功耗</h5>
						<p>最新蓝牙4.0技术，超低功耗，<br>
							一杖电池可用3个月以上
						</p>
					</div>
				</li>
				<li>
					<div class="left-icon"></div>
					<div class="right-des">
						<h5>小巧易戴</h5>
						<p>仅一元硬币大小，可轻松粘贴<br>
							或佩挂在物品上</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<!-- features 部分 -->
	<!-- footer 部分开始 -->
	<div class="footer">
		<div class="container">
			<div class="container-left">
				<dl>
					<dt><a href="#">关注我们</a></dt>
					<dd><a href="#">官方论坛</a></dd>
					<dd><a href="#">新浪微博</a></dd>
				</dl>
				<dl>
					<dt><a href="#">相关网站</a></dt>
					<dd><a href="#">360硬件专区</a></dd>
					<dd><a href="#">360安全路由</a></dd>
					<dd><a href="#">360儿童卫士</a></dd>
				</dl>
			</div>
			<div class="container-right">
				<ul>
					<li>
						<i></i>
						<p>扫一扫<br>关注官方微博</p>
					</li>
					<li>
						<i></i>
						<p>扫一扫<br>关注官方微信</p>
					</li>
				</ul>
			</div>
		</div>
		<div class="copyright">Copyright  2005-2014 360.cn All Rights Reserved 360安全中心</div>
	</div>
	<!-- footer 部分 -->
</body>

</html>